<template>

  <el-divider content-position="right">仪表盘</el-divider>

  <Gauge></Gauge>

  <el-divider content-position="right">日历</el-divider>

  <el-calendar v-model="value"></el-calendar>
  <el-divider content-position="right">图表</el-divider>
  <div class="card-container">
    <el-card style="width: 45%;height: 400px">
      <div id="main" style='height: 400px'></div>
    </el-card>
    <el-card style="width: 45%;height: 400px">
      <div id="mainn" style='height: 400px'></div>
    </el-card>
  </div>
  <div>

  </div>

</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'
import Gauge from "@/component/home/Gauge.vue";


const value = ref(new Date())

onMounted(() => {
  // 获取DOM元素并且进行初始化
  const myChart = echarts.init(document.getElementById('main'));
  const myChart1 = echarts.init(document.getElementById('mainn'));

  myChart1.setOption(option)
  // 创建图标
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  })
})
const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 1048, name: 'Search Engine'},
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 484, name: 'Union Ads'},
        {value: 300, name: 'Video Ads'}
      ]
    }
  ]
};


</script>
<style scoped lang="scss">
.card-container {
  display: flex;
  flex-wrap: wrap;
}

.el-card {
  margin: 30px;
  width: 50%;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>